<template>
    <div class="ucenter-container">
        <div class="banner">
            <div class="avatar">
                <img
                    :src="userInfo.avatarUrl"
                    alt=""
                >
            </div>
            <p>
                {{userInfo.nickName}}
            </p>
        </div>

        <ul class="action-list">
            <!-- <li class="item concat">
                <button open-type="contact">
                    联系客服
                </button>
            </li> -->
            <li class="item" @click="redirect('../ucenter/addr_list/main')">收货地址
                <span class="iconfont">&#xe669;</span>
            </li>

            <li class="item" @click="redirect('../ucenter/settings/main')">个人设置
                <span class="iconfont">&#xe669;</span>
            </li>
            <li class="item">
                <button open-type="share">分享给好友</button>
            </li>
            <li class="item">
                <button open-type="openSetting">打开授权设置页</button>
            </li>

        </ul>

        <!-- 用户授权模态框 -->
        <div
            id="mask"
            v-if="maskIsShow"
        >
            <!-- 注意: 需要使用vue中的事件注册方式@; 原生小程序中注册事件使用的是bind -->

            <button
                open-type="getUserInfo"
                lang="zh_CN"
                @getuserinfo="getUserInfo"
            >同意获取个人信息</button>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            maskIsShow: true,
            msg: "用户中心",
            userInfo: {
                avatarUrl: "./static/images/avatar.png",
                nickName: "昵称"
            }
        };
    },
    methods: {
        // 分享按钮处理函数
        onShareAppMessage: function (res) {
            if (res.from === 'button') {
                // 来自页面内转发按钮
                console.log(res.target)
            }
            return {
                title: '自定义转发标题',
                path: '/page/user?id=123'
            }
        },
        getOpenid(){
            let that=this;
            wx.login({
                success(res){
                   
                    // 前端调用, 不建议
                    // const conf={
                    //     appid:'xxx',
                    //     secret:'xxx'
                    // }
                    // let url='https://api.weixin.qq.com/sns/jscode2session?appid='+conf.appid+'&secret='+conf.secret+'&js_code='+res.code+'&grant_type=authorization_code';
                    // wx.request({
                    //     url:url,
                    //     method: 'GET',
                    //     success(res){
                    //        console.log(res);     
                    //     }
                    // });
                    // 后端调用
                    let url="m=Index&a=getOpenid&js_code="+res.code;
                    
                    that.$http.get({
                        url:url,
                        data:{}
                    }).then((res)=>{
                        // console.log(errcode,res.errcode);
                        if(res.errcode==0){
                            // 查看用户是否注册
                            const userInfo=that.userInfo;
                            let userData={
                                openid:res.data.openid,
                                nickName:userInfo.nickName,
                                gender:userInfo.gender,
                                avatarUrl:userInfo.avatarUrl,
                                province:userInfo.province,
                                city:userInfo.city
                            }
                            that.$http.post({
                                url:'m=Index&a=getUserInfo',
                                data:userData
                            }).then((ret)=>{
                                userData=ret.data;
                                wx.setStorage({
                                    key:'userInfo',
                                    data:userData,
                                    success(res){
                                        // console.log('写入用户信息成功');
                                    }
                                });
    
                            });
                        }
                        
                    });

                    

                }
            });
        },
        // 用户授权按钮回调函数
        getUserInfo: function(e) {
            // 更新数据模型
            this.userInfo = e.target.userInfo;
            // 强制刷新视图
            this.$forceUpdate();
            // 隐藏mask遮罩
            this.maskIsShow = false;
            // 调用getOpenid获取用户的唯一标识信息openid&&将用户数据写入本地存储
            this.getOpenid();
        },
        // 将用户信息保存到本地存储中
        storageUserInfo() {
            wx.setStorage({
                key: "userInfo",
                data: this.userInfo,
                success(res) {
                    // console.log("用户信息保存成功");
                }
            });
        },
        // 页面跳转方法封装
        redirect(url) {
            // wx.navigateTo({url});
            // if (url.indexOf("address") != -1) {
            //     wx.showToast({
            //         title: "功能建设中...",
            //         icon: "none", //success  || loading  || none
            //         duration: 2000
            //     });
            //     return;
            // }
            mpvue.navigateTo({ url });
        },
        // 查看本地存储是否保存了用户信息, 如果保存了, 就不再展示用户授权模态框
        checkUserInfo() {
            const that=this;
            wx.getStorage({
                key: "userInfo",
                success: res => {
                    // 隐藏用户授权模态框
                    that.maskIsShow = false;
                    // // 更新数据模型
                    that.userInfo = res.data;
                    that.$forceUpdate();
                    console.log('aaaaa');
                },fail(){
                    // 检查是否拥有权限&&获取用户信息&&写入本地存储
                    that.checkScope();
                }
            });
        },
        checkScope() {
            const that = this;
            // 查看是否授权
            wx.getSetting({
                success(res) {
                    // 判断用户是否授权获取微信信息
                    if (res.authSetting["scope.userInfo"]) {
                        // 已经授权，可以直接调用 getUserInfo 获取头像昵称
                        wx.getUserInfo({
                            success: function(res) {
                                that.userInfo = res.userInfo;
                            }
                        });
                    }
                }
            });
        }
    },
    created() {
        // 检查本地存储中是否有用户信息
        this.checkUserInfo();
    }
};
</script>
<style lang="scss">
// 导入公共样式
@import "./static/styles/reset.scss";
@import "./static/iconfont/iconfont.scss";
page {
    background-color: $bgColor;
}
.ucenter-container {
    position: relative;
    .banner {
        height: 488rpx;
        background: $baseColor;
        color: #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .avatar {
            border: 4px solid rgba(118, 127, 144, 0.8);
            border-radius: 50%;
            width: 220rpx;
            height: 220rpx;
            img {
                width: 220rpx;
                height: 220rpx;
                border-radius: 50%;
            }
        }
        p {
            margin-top: 30rpx;
            font-size: 35rpx;
        }
    }
    .action-list {
        list-style: none;
        li.item {
            font-size: 35rpx;
            background: #fff;
            margin: 10rpx 0;
            padding: 20rpx 0 20rpx 40rpx;
            line-height: 40rpx;
            span {
                float: right;
                padding-right: 40rpx;
                color: #999;
            }
            button {
                line-height: 40rpx;
                padding: 0;
                text-align: left;
                font-size: 35rpx;
                background-color: #fff;
                // 去除按钮边框
                &::after{
                    border:none;
                }
            }
        }
    }
    #mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>